<template>
	<view>
		<page-head :title="'找回密码'" :headtype="2"></page-head>
		<view class="mian-main marginAuto">
			<view class="item marginAuto">
				<view class="item-main marginAuto">
					<view class="item-title">手机号</view>
					<input type="text" name="phone" maxlength="11" v-model="phone" placeholder="请输入手机号">
				</view>
			</view>
			<view class="item marginAuto">
				<view class="item-main marginAuto">
					<view class="item-title">验证码</view>
					<input type="text" name="veri" style="width:50%;" v-model="veri" placeholder="请输入验证码">
					<view class="each-code pull-right">
						<text class="each-code-y mainColor" v-if="!istime" @click="vericlick()">获取验证码</text>
						<text class="each-code-j mainColor" v-if="istime">{{times}}s</text>
					</view>
				</view>
			</view>
			<view class="item marginAuto">
				<view class="item-main marginAuto">
					<view class="item-title">密码</view>
					<input type="password" name="pass" v-model="pass" placeholder="请输入密码">
				</view>
			</view>
			<view class="item marginAuto">
				<view class="item-main marginAuto">
					<view class="item-title">确认密码</view>
					<input type="password" name="pass" v-model="enterpass" placeholder="请输入密码">
				</view>
			</view>
		</view>
		<view class="footerbtn marginAuto" style="width:600rpx;">
			<uv-button text="确定" @click="enter()" :customStyle="{
				'background':'#2340FF',
				'color':'#fff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'20rpx'
			}"></uv-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				istime: false,
				times:60,
				phone: '',
				veri: '',
				pass:'',
				enterpass:''
			};
		},
		onLoad() {},
		methods: {
			enter(){
				let sendData =  {
					mobile:this.phone,
					password:this.pass,
					confirm_password:this.enterpass,
					sms_code:this.veri
				};
				if (this.apifun.testphone.test(this.phone) == false || this.phone == '') {
					this.apifun.toast("手机格式有误");
					return false
				};
				if(this.pass == '' || this.veri == ''){
					this.apifun.toast("请将信息补充完整");
					return false
				};
				if(this.pass != this.enterpass){
					this.apifun.toast("两次输入密码不一致");
					return false
				};
				this.apifun.unirequest('/common/user/retrievePwd','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.apifun.toast('密码修改成功')
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/start/login'
							})
						},1500)
					}else{
						this.apifun.toast(res.msg)
					}
				},false,true)
			},
			vericlick() {
				let that = this;
				let flag = true;
				if (that.apifun.testphone.test(that.phone) == false || that.phone == '') {
					that.apifun.toast("手机格式有误");
					return false
				};
				if (flag) {
					flag = false;
					let index = 60;
					that.istime = true;
					let time = setInterval(function() {
						if (index > 0) {
							--index;
							that.times = index;
						} else {
							index = 60;
							clearInterval(time)
							that.istime = false;
							flag = true;
						}
					}, 1000);
				}
				let sendData = {
					mobile: that.phone,
					type: '1'
				}
				that.apifun.unirequest(this.apifun.login_send_code, 'post', sendData, (res) => {
					if (res.code === 200) {
						let data = res.data;
						that.apifun.toast('发送成功；请注意查收');
					} else {
						that.apifun.toast(res.msg)
					}
				},false,true)
			}
		},
	};
</script>

<style scoped lang="scss">
	page{
		background-color: #FBFBFB;
	}
	/* input */
	.mian-main {
		width:90%;
		border-radius:20rpx;
		margin-top: 20rpx;
		background-color:#fff;
	}
	
	.item {
		padding: 10rpx 0;
	}
	
	.item-main {
		width:90%;
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.item .item-title {
		display: inline-block;
		width: 150rpx;
		margin-right: 20rpx;
		font-size: 30rpx;
		color: #333333;
	}
	
	.item input {
		margin-left: 10rpx;
		width: 65%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #333333;
	}
	
	.passwordtext {
		line-height: 80rpx;
		margin-top: 80rpx;
	}
	
	.passwordtext-button {
		color: #8D8D97;
		font-size: 24rpx;
	}
	
	.each-code {
		height: 64rpx;
		line-height: 56rpx;
		width: 150rpx;
		margin-top: 6rpx;
		text-align: center;
	}
	
	.each-code text {
		color: #333333;
		font-size: 26rpx;
		margin: 0;
	}
	.footerbtn{
		position: fixed;
		bottom:70rpx;
		left: 50%;
		margin-left: -300rpx;
	}
</style>